const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ProgressPlugin, ProvidePlugin } = require("webpack");
const VueLoaderPlugin = require("vue-loader/lib/plugin");


module.exports = {
    entry: {
        chunk: ["vue"],
        app: {
            import: path.resolve(__dirname, "../", "src/main.js"),
            dependOn:"chunk"
        }
    },
    output: {
        path: path.resolve(__dirname, "../", "dist"),
        filename: 'js/[name].[chunkhash:8].js',
        clean:true
    },

    plugins: [new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "../", "public/index.html"),
        inject: "body",
        filename: "index.html",
        title:"vue-element-admin"
    }),
        new ProgressPlugin({
            handler(percentage, message, ...args) {
                if (percentage == 1) {
                    console.log("100% 打包/启动成功~");
                } else {
                    console.log(`${Math.floor(percentage*100)}%正在打包（编译）...`);
                }
            }
        }),
        new VueLoaderPlugin(),
        new ProvidePlugin({
            Vue: path.resolve(__dirname, "../","node_modules/")
        })
    ],
    module: {
        rules: [
            { test: /\.js$/, use: "babel-loader" },
            { test: /\.vue$/, use: "vue-loader" },
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            { test: /\.(png|jpg|svg|gif|jpeg|webp)$/, type:'asset/resource',generator:{filename:'img/[name].[contenthash:8][ext]'} }
        ]
    },
    resolve: {  
        alias: {
            'vue$':'vue/dist/vue.esm.js'
        }
    }
}